<template>
  <div id="app">
    <div class="container">
      <div class="left">
        <div class="left_content">
          <div class="top">
            <span class="top_one">作品</span>
            <span class="top_two">浏览量:</span>
            <span class="top_three">{{ moreArr.liulan }}</span>
          </div>
          <!-- 图片 -->
          <div class="left_main">
            <p class="my_text">{{ moreArr.title }}</p>
            <p class="my_textarea" v-if="moreArr.textarea">
              {{ moreArr.textarea }}
            </p>
            <div
              class="imgs"
              v-for="(item, index) in moreArr.imageUrl"
              v-bind:key="index"
            >
              <img :src="item" alt="" />
            </div>
            <div class="biaoqians">
              <span class="iconfont icon-biaoqian"></span>
              <div
                v-for="(item1, index) in moreArr.biaoqian"
                v-bind:key="index"
                class="biqoqian_btn"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
          <!-- 标签 -->
          <div class="left_bottom">
            <div class="share">
              <span class="iconfont icon-weibo2"></span>
              <span class="iconfont icon-weixin"></span>
              <span class="iconfont icon-kongjian"></span>
            </div>
            <div>
              <div class="goodBtns" @click="zanAdd">
                <span class="iconfont icon-dianzan"></span>
                <span class="zanCount">{{ moreArr.dianzan }}</span>
              </div>
            </div>
            <div class="collecBtns">
              <div
                class="collecBtn"
                @click.once="shoucang_light"
                :style="{ color: '#fff' }"
              >
                <span class="iconfont icon-shoucangcopy2"></span>
              </div>
              <span class="collecCount">收藏({{ moreArr.shoucang }})</span>
            </div>
          </div>
        </div>
        <div class="my">
          <p class="my_title">评论</p>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="1000"
            show-word-limit
            resize="none"
          >
          </el-input>
          <el-button type="text" @click="add">评论</el-button>
        </div>
        <div class="pinglun" v-if="pingArr.length">
          <div class="pinglun_top"></div>
          <p class="ping_title">全部评论 ({{ pingArr.length }})</p>
          <div
            class="person_pinglun"
            v-for="(pingItem, index) in pingArr"
            :key="index"
          >
            <div class="ping_left">
              <img :src="pingItem.touxiang" alt="" />
            </div>
            <div class="ping_right">
              <a href="">{{ pingItem.username }}</a>
              <p>{{ pingItem.content }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="right_top">
          <a href="">
            <img class="my_touxiang" :src="moreArr.touxiang" alt="" />
          </a>
          <div class="renzheng">
            <span class="renzheng_name">{{ moreArr.username }}</span>
            <span class="renzheng_icon" v-if="moreArr.daka"
              ><img :src="moreArr.daka" alt=""
            /></span>
          </div>
          <div class="rongyu">
            作品：<span class="zuoPinCount">{{ imgLength }}</span> 粉丝：<span
              class="fenSiCount"
              >{{ moreArr.fensi }}</span
            >
          </div>
          <span class="guanzhu">关注</span>
        </div>
        <div class="right_bottom">
          <div
            class="imgBox"
            v-for="(item2, index) in imgArr"
            v-bind:key="index"
          >
            <div @click="myimg(item2.userid, item2.zuopinid)" class="imgbox1">
              <img :src="item2.imageUrl[0]" alt="" />
            </div>
            <!-- <router-link :to="{name:'/community/zuopinmore', query: {id:1}}">  -->
            <!-- <a
              :href="
                '/community/zuopinmore?userid=' +
                item2.userid +
                '&zuopinid=' +
                item2.zuopinid
              "
              ><img :src="item2.imageUrl[0]" alt=""
            /></a> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 左右箭头切换 -->
    <div class="tabLeft" @click="tabL">
      <span class="iconfont icon-leftArrows"></span>
    </div>
    <div class="tabRight" @click="tabR">
      <span class="iconfont icon-jiantouyou"></span>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      dialogVisible: false,
      textarea: "",
      moreArr: [],
      showcollecCount: true,
      imgArr: [],
      imgLength: "",
      communityArr: [],
      index: 0,
      uid: "",
      zid: "",
      pingArr: "",
    };
  },
  methods: {
    myimg(userid, zuopinid) {
      this.$router.push({
        path: "/community/zuopinmore",
        query: { userid: userid, zuopinid: zuopinid },
      });
      location.reload();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    shoucang_light() {
      this.showcollecCount = false;
    },
    tabL() {
      this.axios("/ly/tabL", {
        params: { zuopinid: this.zid },
      }).then((res) => {
        console.log(res.data);
        var arr = res.data;
        this.$router.push({
          path: "/community/zuopinmore",
          query: { userid: arr[0].userid, zuopinid: arr[0].zuopinid },
        });
        location.reload();
      });
    },
    tabR() {
      this.axios("/ly/tabR", {
        params: { userid: this.uid, zuopinid: this.zid },
      }).then((res) => {
        var arr = res.data;
        // this.$router.push({ userid: arr[0].userid, zuopinid: arr[0].zuopinid });
        this.$router.push({
          path: "/community/zuopinmore",
          query: { userid: arr[0].userid, zuopinid: arr[0].zuopinid },
        });
        location.reload();
      });
    },
    zanAdd() {
      this.axios("/ly/zanAdd", { params: { zuopinid: this.zid } }).then(
        (res) => {
          this.moreArr.dianzan += 1;
          console.log(res.data);
        }
      );
    },
    add() {
      if (this.textarea.length) {
        var content = this.textarea;
        this.axios("/ly/updatapinglun", {
          params: { zuopinid: this.zid, content: content },
        }).then((res) => {
          this.axios("/ly/btnPing", {
            params: { zuopinid: this.zid },
          }).then((res) => {
            this.pingArr = res.data;
            this.textarea = "";
          });
        });
      } else {
        this.$alert("内容必填", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
  },
  mounted() {
    var id = this.$route.query.userid;
    var zid = this.$route.query.zuopinid;
    this.uid = id;
    this.zid = zid;
    //作品详情
    this.axios("/ly/zuopinmore", {
      params: { userid: id, zuopinid: zid },
    }).then((res) => {
      var arr = res.data;
      arr.map((item) => {
        item.biaoqian = item.biaoqian.split(",");
        item.imageUrl = item.imageUrl.split(",");
      });
      this.moreArr = arr[0];
    });
    //全部作品
    this.axios("/ly/zuoPinAll", {
      params: { userid: id },
    }).then((res) => {
      var length = res.data.length;
      var arr = res.data.reverse().slice(0, 8);
      arr.map((item) => {
        item.imageUrl = item.imageUrl.split(",");
      });
      this.imgArr = arr;
      this.imgLength = length;
    });
    //获取id
    this.axios("/ly/works").then((res) => {
      var arr = res.data;
      this.communityArr = arr;
    });
    //评论数获取
    this.axios("/ly/btnPing", {
      params: { zuopinid: this.zid },
    }).then((res) => {
      this.pingArr = res.data;
    });
  },
};
</script>

<style scoped>
#app {
  background-color: #ffffff;
}
.container {
  width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}
.left_content {
  box-shadow: 0 2px 8px 0 hsl(0deg 0% 85% / 50%);
}
.left {
  width: 860px;
  margin-right: 20px;
}
.right {
  flex: 1;
  border: 1px solid #eef3f5;
  height: 650px;
  padding-bottom: 20px;
}
.top {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eef3f5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
}
.top_one {
  border: 1px solid #1e8bdf;
  color: #1e8bdf;
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 20px;
  margin-right: 25px;
}
.top_two,
.top_three {
  color: #87959f;
}
.top_two {
  margin-right: 10px;
}
.left_main {
  padding: 20px;
}
.left_bottom {
  height: 112px;
  border-top: 1px solid #eef3f5;
  display: flex;
  justify-content: space-between;
  padding: 30px 40px 0 40px;
  box-sizing: border-box;
}
.my {
  margin-top: 20px;
  background-color: #f6f8fa;
  border-color: #eef3f5;
  height: 224px;
  padding-top: 10px;
  box-sizing: border-box;
  position: relative;
}
.my_title {
  color: #87959f;
  font-size: 14px;
  padding-left: 20px;
  border-left: 3px solid #1e8bdf;
}
.el-textarea {
  width: 818px;
  margin-top: 25px;
  margin-left: 20px;
}
.my /deep/ .el-textarea__inner {
  height: 102px;
  border: 1px solid #eef3f5;
}
.my /deep/ .el-textarea__inner:focus {
  border: 1px solid #027cdb;
}
.el-button {
  position: absolute;
  bottom: 20px;
  right: 22px;
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #027cdb;
  color: #fff;
}
.el-button:hover {
  background-color: #73b2fc;
}
.share {
  color: #b1bbc3;
}
.icon-weibo2,
.icon-weixin {
  font-size: 28px;
}
.icon-weibo2,
.icon-weixin {
  margin-right: 10px;
}
.icon-kongjian {
  font-size: 26px;
}
.goodBtns {
  width: 120px;
  height: 64px;
  border-radius: 60px;
  background-color: #027cdb;
  text-align: center;
  margin-top: -10px;
  margin-left: -30px;
  display: flex;
  flex-direction: column;
}
.icon-dianzan {
  margin-top: 10px;
  font-size: 28px;
  color: #fff;
}
.zanCount {
  font-size: 12px;
  color: #fff;
}
.collecBtn {
  width: 62px;
  height: 32px;
  border: 1px solid #e3e9ef;
  border-radius: 100px;
  text-align: center;
  line-height: 32px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.icon-shoucangcopy2 {
  font-size: 18px;
  color: #b1bbc3;
}
.collecCount {
  font-size: 12px;
  color: #b1bbc3;
  margin-left: 15px;
}
.goodBtns:hover {
  background-color: #73b2fc;
  cursor: pointer;
}
.imgs img {
  width: 100%;
}
.imgs {
  margin-bottom: 15px;
}
.my_text,
.my_textarea {
  margin-bottom: 25px;
  font-size: 14px;
  color: #212b34;
}
.icon-biaoqian {
  font-size: 14px;
  color: #87959f;
  margin-top: 8px;
}
.biaoqians {
  color: #87959f;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
}
.biqoqian_btn {
  padding: 5px;
  margin-left: 10px;
}
.right_top {
  height: 235px;
  display: flex;
  border-bottom: 1px dashed #e3e9ef;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  box-sizing: border-box;
}
.my_touxiang {
  width: 80px;
  border-radius: 50%;
}
.renzheng {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  align-items: center;
}
.renzheng_name {
  font-size: 18px;
  font-weight: 600;
}
.renzheng_icon {
  margin-left: 10px;
  margin-top: 3px;
}
.rongyu {
  font-size: 12px;
  color: #87959f;
  padding-top: 10px;
}
.guanzhu {
  width: 100px;
  height: 36px;
  line-height: 34px;
  background-color: #027cdb;
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin-top: 12px;
}
.guanzhu:hover {
  background-color: #73b2fc;
  cursor: pointer;
}
.right_bottom {
  height: 413px;
  display: flex;
  box-sizing: border-box;
  /* justify-content: flex-start;
  align-items: flex-start; */
  flex-wrap: wrap;
  overflow-y: scroll;
  margin-top: 10px;
}
.right_bottom .imgBox {
  width: 130px;
  height: 100px;
  margin-left: 8px;
  margin-bottom: 8px;
}
.right_bottom .imgbox1 {
  width: 130px;
  height: 100px;
}
.right_bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zuoPinCount,
.fenSiCount {
  font-size: 14px;
  color: #525a67;
  margin-right: 8px;
}
.tabLeft,
.tabRight {
  width: 60px;
  height: 120px;
  position: fixed;
  text-align: center;
  line-height: 120px;
}
.tabLeft {
  top: 50%;
  left: 0;
  transform: translateY(-80%);
}
.tabRight {
  top: 50%;
  right: 0;
  transform: translateY(-80%);
}
.tabLeft:hover,
.tabRight:hover {
  background-color: #b1bbc3;
  cursor: pointer;
}
.icon-jiantouyou,
.icon-leftArrows {
  font-size: 60px;
  color: #d0d7da;
}
.pinglun {
  border-top: 1px solid #e3e9ef;
  background-color: #f6f8fa;
}
.pinglun .ping_title {
  color: #212b34;
  font-size: 14px;
  padding-left: 20px;
  line-height: 60px;
}
.person_pinglun {
  display: flex;
  justify-content: flex-start;
  padding: 20px;
  border-bottom: 1px solid #eef3f5;
}
.person_pinglun .ping_left {
  width: 50px;
  height: 50px;
}
.ping_left img {
  width: 50px;
  border-radius: 50%;
}
.ping_right {
  margin-left: 20px;
}
a {
  text-decoration: none;
}
.ping_right a {
  color: #525a67;
}
.ping_right p {
  color: #212b34;
  padding-top: 8px;
}
</style>